<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
        src="https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-for='(item,index) in list' style="display: flex;">
            编号: {{item.id }}  姓名: {{item.username }} 性别 {{item.sex }}  <div @click="jumpDetail(index)">查看详情</div>
        </div>

    </div>
    <script>
        // $.get("http://10.36.144.3:8080/getcode", { name: "John", time: "2pm" },
        //             function(data){
        //             alert("Data Loaded: " + data);
        //             });
        var app = new Vue({
            el: '#app',
            data: {
                helloData: {},
                list:[]
            },
            created() {
                var _this=this;
                $.post("http://localhost:8080/list/getlist", { },
                    function(data){
                        data=JSON.parse(data)
                        _this.list=data
                        console.log(_this.list)
                    });
            },
            methods: {
                jumpDetail(index){
                    console.log(index);
                    window.location.href=`/detail.html?id=${this.list[index].EMPLOYEE_ID}`
                }
            },

            　mounted:function(){
        　　　　　　console.log(this.list);
        　　　　}
        })
    </script>
</body>

</html>